{% extends "admin/base_site.html" %}
{% load i18n %}
{% block content %}
<div class="k4w-admin-page-head">
  <div><p class="k4w-eyebrow">AMBIENTE DE TESTES</p><h1>Credenciais dos clientes fictícios</h1><p>{{ warning }}</p></div>
  <a class="k4w-admin-primary" href="{% url 'demo_credentials_export' %}"><span class="material-symbols-outlined">download</span> Descarregar TXT</a>
</div>
<div class="k4w-demo-warning"><span class="material-symbols-outlined">warning</span><div><strong>Não utilizar em produção.</strong><p>Esta página nunca mostra palavras-passe reais. Apenas apresenta o catálogo fixo criado pelo comando <code>seed_demo_data --reset</code>.</p></div></div>
<div class="k4w-demo-credentials-grid">
{% for row in rows %}
<article class="k4w-demo-credential-card">
  <div class="k4w-demo-credential-top"><span class="k4w-demo-avatar">{{ row.first_name|first|upper }}</span><div><h2>{{ row.client_name }}</h2><p>{{ row.role_label }}</p></div><span class="k4w-demo-state {% if row.exists and row.active %}is-active{% else %}is-missing{% endif %}">{% if row.exists and row.active %}Ativa{% else %}Não criada{% endif %}</span></div>
  <dl><div><dt>Utilizador</dt><dd><code>{{ row.username }}</code><button type="button" data-copy="{{ row.username }}" title="Copiar">content_copy</button></dd></div><div><dt>Palavra-passe</dt><dd><code>{{ row.password }}</code><button type="button" data-copy="{{ row.password }}" title="Copiar">content_copy</button></dd></div><div><dt>Email</dt><dd>{{ row.email }}</dd></div><div><dt>2FA</dt><dd>{% if row.has_2fa %}Ativo{% else %}Não configurado{% endif %}</dd></div></dl>
  <a href="{% url 'security:login' %}" target="_blank">Abrir login único <span>↗</span></a>
</article>
{% endfor %}
</div>
<script>document.querySelectorAll('[data-copy]').forEach(function(button){button.addEventListener('click',function(){navigator.clipboard.writeText(button.dataset.copy);button.textContent='check';setTimeout(function(){button.textContent='content_copy'},1200);});});</script>
{% endblock %}